<template>
  <div id="ArrivalProvisionalReceipt">
    <root name="ArrivalProvisionalReceipt">
      <SafeHeader
        v-bind="{
          title: '到货暂收',
          isBack: true,
          fixedTop: true,
        }"
      >
      </SafeHeader>
      <v-container>
        <v-card outlined class="py-2 mt-2">
          <v-row class="ma-0 mb-4">
            <v-col class="py-1">
              <v-text-field
                autofocus
                clearable
                filled
                :prepend-inner-icon="mdiCreditCardScan"
                class="my-0 inputPlaceholder"
                @keydown.13="taskCodeSearch"
                dense
                hide-details
                v-model="taskFrom.billNo"
                placeholder="请扫描任务号或物料标签"
              ></v-text-field>
            </v-col>
          </v-row>
          <!-- <v-row class="ma-0 mb-4">
              <v-col class="py-1">
                <v-text-field
                  clearable
                  filled
                  :prepend-inner-icon="mdiCreditCardScan"
                  class="my-0 inputPlaceholder"
                  @keydown.13="taskCodeSearch"
                  dense
                  hide-details
                  v-model="taskFrom.itemCode"
                  placeholder="请扫描入库任务号"
                ></v-text-field>
              </v-col>
            </v-row> -->
          <!-- <v-row class="ma-0 mb-3">
              <v-col class="py-0">
                <v-text-field
                  label="状态"
                  dense
                  required
                  readonly
                  hide-details
                  v-model="taskFrom.asnState"
                ></v-text-field>
              </v-col>
            </v-row> -->
          <v-row class="ma-0 mb-4">
            <v-col class="py-0">
              <v-text-field
                label="供应商"
                dense
                readonly
                v-model="taskFrom.supplierName"
                hide-details
              ></v-text-field>
            </v-col>
          </v-row>
          <v-row class="ma-0 mb-4">
            <v-col class="py-0">
              <v-text-field
                label="计划时间"
                dense
                readonly
                v-model="taskFrom.expectTime"
                hide-details
              ></v-text-field>
            </v-col>
          </v-row>
        </v-card>
      </v-container>
      <!-- <v-container class="my-4 white lighten-5" style="line-height: 1.75rem">

        <itemList
          @onEnter="taskCodeSearch"
          itemLabel="任务单号"
          v-model="taskFrom.billNo"
          placeholder="输入任务号可进行查询"
          type="input"
        ></itemList>
        <v-row class="mt-1">
          <v-col cols="3" class="py-2 card-lable">状态</v-col>
           <v-col class="py-2 card-value"
                ><v-chip class="ma-0" small>
                  {{ taskFrom.asnState }}
                </v-chip></v-col
              >
          <v-col class="py-2 card-value">{{ taskFrom.asnState }}</v-col>
        </v-row>
        <v-row class="mt-1">
          <v-col cols="3" class="py-2 card-lable"> 供应商 </v-col>
          <v-col class="py-2 card-value">{{ taskFrom.supplierName }}</v-col>
        </v-row>
        <v-row class="mt-1">
          <v-col cols="3" class="py-2 card-lable"> 计划时间 </v-col>
          <v-col class="py-2 card-value">{{ taskFrom.expectTime }}</v-col>
        </v-row>
      </v-container> -->
      <v-container class="task_list mb-15 white">
        <v-row>
          <v-col
            cols="12"
            class="card-title"
            style="padding-bottom: 8px; padding-top: 8px"
          >入库任务明细列表</v-col
          >
        </v-row>
        <v-divider class="mb-2"></v-divider>
        <div v-if="taskFrom.taskList[0]">
          <v-container v-for="(item, index) in taskFrom.taskList" :key="index">
            <v-row>
              <v-col cols="12" class="pa-0 pb-2">
                <v-card outlined style="background-color: #f2f3f5">
                  <v-card-subtitle>
                    <v-row
                      class="
                        pa-0
                        d-flex
                        flex-row
                        justify-space-between
                        wms-v-row
                      "
                    >
                      <v-col cols="4" class="py-1 card-lable px-2"
                      >物料编码</v-col
                      >
                      <v-col class="py-1 card-value px-2">{{
                        item.itemCode
                        }}</v-col>
                    </v-row>
                    <v-row
                      class="
                        pa-0
                        d-flex
                        flex-row
                        justify-space-between
                        wms-v-row
                      "
                    >
                      <v-col cols="4" class="py-1 card-lable">物料名称</v-col>
                      <v-col class="py-1 card-value">{{ item.itemName }}</v-col>
                    </v-row>
                    <v-row
                      class="
                        pa-0
                        d-flex
                        flex-row
                        justify-space-between
                        wms-v-row
                      "
                    >
                      <v-col cols="4" class="py-1 card-lable">计划数量</v-col>
                      <v-col class="py-1 card-value">{{
                        item.expectQuantity
                        }}</v-col>
                    </v-row>
                    <v-row
                      class="
                        pa-0
                        d-flex
                        flex-row
                        justify-space-between
                        wms-v-row
                      "
                    >
                      <v-col cols="4" class="py-1 card-lable">已收数量</v-col>
                      <v-col class="py-1"  style="color: #627aec">{{
                        item.acceptQuantity
                        }}</v-col>
                        <v-col  cols="5" style="color: #627aec;">
                       <v-checkbox
                          hide-details
                          label="全部收货"

                        ></v-checkbox>
                        </v-col>
                    </v-row>
                    <v-divider class="mt-3 mb-2"></v-divider>
                    <v-row
                      class="
                        d-flex
                        flex-row
                        justify-space-between
                        align-center
                        pt-1
                      "
                    >
                      <v-col cols="4" class="py-1 px-2" style="color: #323333"
                      >本次收货数量</v-col
                      >
                      <v-col class="py-1 px-2" style="color: #ffc352">
                        {{
                        item.totalReceiptQuantity
                          ? item.totalReceiptQuantity
                          : 0
                        }}</v-col
                      >
                      <v-col cols="3" class="d-flex justify-end py-1">
                        <v-btn
                          rounded
                          small
                          color="#193690"
                          dark
                          @click="taskListReceipt(item)"
                        >收货</v-btn
                        >
                      </v-col>
                    </v-row>
                  </v-card-subtitle>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
        </div>

        <v-row v-else>
          <v-col cols="12" class="text-center">暂无数据</v-col>
        </v-row>
      </v-container>
      <div v-show="hidshow" class="footer">
        <v-bottom-navigation
          height="60"
          style="background: transparent; box-shadow: none"
          v-show="hidshow"
        >
          <v-row
            class="pa-0 ma-0 justify-center"
            style="background: transparent"
            v-show="hidshow"
          >
            <v-col
              cols="12"
              class="pa-0 ma-0 d-flex justify-center align-center mb-2 px-2"
              style="background: transparent"
            >
              <v-btn
                class="wms-submit-btn"
                block
                style="
                  background-color: #193690;
                  height: 100%;
                  border-radius: 10px;
                "
                @click="sourceOrderQuery"
                v-show="hidshow"
              >源单查询</v-btn
              >
            </v-col>
          </v-row>
        </v-bottom-navigation>
      </div>
      <!-- 收货弹窗 -->
      <v-dialog v-model="dialog" fullscreen>
        <v-card class="receiptDialog" id="receiptDialog">
          <v-card-title
            class="headline card-title pa-4 font-weight-bold"
            style="height: 78px"
          >收货</v-card-title
          >
          <v-card-subtitle class="d-flex ma-0 pa-0">
            <div style="width: 100%">
              <v-container
                class="pa-0 receiving_heard pb-1"
                style="background: #193690; border-bottom: 1px solid gray"
              >
                <v-row class="py-2">
                  <v-col
                    cols="12"
                    class="
                      d-flex
                      justify-space-around
                      align-center
                      flex-column
                      px-2
                    "
                    style="color: #fff"
                  >
                    <span>{{ oldReceipFrom.itemCode }}</span>
                    <span class="mt-1">{{ oldReceipFrom.itemName }}</span>
                  </v-col>
                </v-row>
                <v-row style="color: #fff">
                  <v-col
                    class="d-flex justify-space-around align-center flex-column"
                    style="border-right: 1px solid #fff"
                  >
                    <span style="font-size: 18px">{{
                      oldReceipFrom.expectQuantity
                      }}</span>
                    <span style="font-size: 14px" class="mt-1">计划数量</span>
                  </v-col>
                  <v-col
                    class="d-flex justify-space-around align-center flex-column"
                  >
                    <span style="font-size: 18px">{{
                      oldReceipFrom.receivedQuantity
                      }}</span>
                    <span style="font-size: 14px" class="mt-1">待收数量</span>
                  </v-col>
                </v-row>
                <v-row
                  style="border-radius: 4px; background: #fff"
                  class="justify-center align-center mx-2 mt-4"
                >
                  <v-col cols="11" class="py-2">
                    <v-progress-linear
                      :value="oldReceipFrom.totalNum"
                      height="18"
                      color="#F8A73C"
                      background-color="#fff"
                      buffer-value="100"
                      style="border: 1px solid grey; border-radius: 12px"
                    >
                      <strong style="color: #656566"
                      >{{ Math.ceil(oldReceipFrom.totalNum) }}%</strong
                      >
                    </v-progress-linear>
                  </v-col>
                </v-row>
              </v-container>
              <v-container
                class="receiving_bottom mt-6 mb-14 pb-4 px-2"
                style="background: transparent"
              >
                <v-card outlined class="py-4">
                  <v-row class="mt-0">
                    <v-col
                      cols="12"
                      class="py-0 d-flex align-center font-weight-bold"
                      style="font-size: 15px"
                    >收货数量</v-col
                    >
                    <v-col class="py-1">
                      <v-text-field
                        class="my-0 inputPlaceholder"
                        dense
                        type="number"
                        hide-details
                        placeholder="请输入收货数量"
                        v-model="receiptDialogFrom.quantity"
                      ></v-text-field>
                    </v-col>
                  </v-row>
                  <!-- <v-row class="mt-4">
                    <v-col
                      cols="12"
                      class="py-0 d-flex align-center font-weight-bold"
                      style="font-size: 15px"
                      >收货库位</v-col
                    >
                    <v-col class="py-1">
                      <v-text-field
                        readonly
                        class="inputPlaceholder"
                        dense
                        hide-details
                        placeholder="请选择收货库位"
                        v-model="receiptDialogFrom.cell"
                      >
                        <template v-slot:append>
                          <v-btn
                            rounded
                            small
                            color="#193690"
                            dark
                            @click="createLocation"
                            >选择</v-btn
                          ></template
                        >
                      </v-text-field></v-col
                    >
                  </v-row> -->
                </v-card>
              </v-container>
              <div v-show="hidshow" class="footer">
                <v-bottom-navigation
                  grow
                  style="background: transparent; box-shadow: none"
                  class="navigationBtns"
                >
                  <v-row
                    class="ma-0 justify-space-between px-4 py-2"
                    style="background: inherit"
                  >
                    <v-col class="pa-0" cols="3"
                    ><v-btn
                      class="rounded-xl navigationBtns_return"
                      block
                      outlined
                      rounded
                      style="
                          height: 100%;
                          color: #193690 !important;
                          fontcolor: #193690 !important;
                        "
                      @click="dialog = false"
                    >返回</v-btn
                    ></v-col
                    >
                    <v-col class="pa-0" cols="8"
                    ><v-btn
                      class="rounded-xl"
                      block
                      style="height: 100%"
                      color="#193690"
                      @click="receiptDialogClick"
                    >提交</v-btn
                    ></v-col
                    >
                  </v-row>
                </v-bottom-navigation>
              </div>
            </div>
            <v-bottom-sheet v-model="sheet" persistent>
              <v-sheet class="text-center" height="30px">
                <v-btn class="mt-1" text color="red" @click="sheet = !sheet">
                  关闭
                </v-btn>
              </v-sheet>
              <v-list>
                <v-list-item
                  v-for="cell in cellList"
                  :key="cell.cellId"
                  @click="cellSelect(cell)"
                >
                  <v-list-item-title>{{ cell.cellName }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-bottom-sheet>
          </v-card-subtitle>
        </v-card>
      </v-dialog>
      <v-overlay :value="overlay">
        <v-progress-circular indeterminate size="64">
          <v-progress-circular indeterminate size="64"></v-progress-circular>
        </v-progress-circular>
      </v-overlay>
    </root>
  </div>
</template>

<script>
  import Root from "@/components/Root.vue";
  import { mdiCreditCardScan } from "@mdi/js";
  import SafeHeader from "@/components/safeHeader_wms.vue";
  import wms from "@/utils/business_wms";
  import _ from "lodash";
  import { apiList } from "@/static/apiList";
  import Storage from "@/utils/storage.js";

  export default {
    name: "ArrivalProvisionalReceipt",
    components: {
      Root,
      SafeHeader,
    },
    data() {
      return {
        //默认屏幕高度
        docmHeight: document.documentElement.clientHeight,
        //实时屏幕高度
        showHeight: document.documentElement.clientHeight,
        //隐藏或显示下方按钮
        hidshow: true,

        mdiCreditCardScan: mdiCreditCardScan,

        overlay: false,
        taskInput: true,
        tab: null,
        dialog: false,
        //   任务标签表单
        taskFrom: {
          billNo: "",
          itemCode: "", //通过物料编码查询
          supplierName: "",
          expectTime: "",
          asnState: "",
          //   任务页面列表
          taskList: [],
        },

        //   过渡对象
        oldReceipFrom: {
          // 收货单数据
          receiptList: [],
        },
        //   表单数据
        receiptDialogFrom: {
          quantity: "",
          generate: "",
          cell: "",
        },

        sheet: false,
        //   仓库列表
        cellList: [],

        // cellNum
        generateNum: "",

        // 收货列表
        receiptListData: [],
      };
    },
    methods: {
      // 一种是输入单号进行查询，第二种是通过源单查询带出单号进行查询
      taskCodeSearch() {
        if (!this.taskFrom.billNo) {
          return;
        }
        let params = {
          billNo: this.taskFrom.billNo,
        };
        // 通过接口获取单号数据和列表
        this.overlay = true;
        wms
          .get({ url: "/asn/masters/findByBillNo", data: params })
          .then((res) => {
            console.log(JSON.stringify(res.data), !_.isEmpty(res.data.data));
            if (
              res.status == 200 &&
              res.data.code == 200 &&
              !_.isEmpty(res.data.data)
            ) {
              //判断状态是否正确
              let dataObj = res.data.data;
              console.log(JSON.stringify(dataObj));
              if (dataObj.asnState > 2) {
                this.overlay = false;
                console.log("已验收完成");
              }
              this.taskInput = true;
              this.taskFrom.supplierName = dataObj.supplierName;
              this.taskFrom.expectTime = dataObj.expectTime;
              apiList["asnStates"].forEach((item) => {
                if (item.value == dataObj.asnState) {
                  this.taskFrom.asnState = item.label;
                }
              });
              wms
                .get({ url: "/asn/details/findByBillNo", data: params })
                .then((res) => {
                  if (
                    res.status == 200 &&
                    res.data.code == 200 &&
                    !_.isEmpty(res.data.data)
                  ) {
                    let dataList = res.data.data.list;
                    // this.taskFrom.taskList = [{

                    // }]
                    this.taskFrom.taskList = dataList;
                  }
                  this.overlay = false;
                });
            } else {
              //根据物料去查
              let criteria = { itemCode: this.taskFrom.billNo };
              wms
                .get({ url: "/asn/details/findByItemCode", data: criteria })
                .then((res) => {
                  if (
                    res.status == 200 &&
                    res.data.code == 200 &&
                    !_.isEmpty(res.data.data)
                  ) {
                    let dataList = res.data.data;
                    if (dataList.total > 0) {
                      //跳转
                      this.overlay = false;
                      this.$root.api.api.openWin({
                        name: "ArrivalProvisionalReceipt_OrderList",
                        url: "./ArrivalProvisionalReceipt_OrderList.html",
                        pageParam: {
                          itemCode: this.taskFrom.billNo
                        }
                      });
                    } else {
                      //提示
                      window.api.toast({ msg: "无数据", location: "middle" });
                      this.overlay = false;
                    }
                  }
                });
            }
          });
      },
      // 收货弹框确定
      receiptDialogClick() {
        //遮罩弹出
        this.overlay = true;
        // 前台展示
        // 当前收货数量
        if (!this.oldReceipFrom.totalReceiptQuantity) {
          this.oldReceipFrom.totalReceiptQuantity = 0;
        }
        // 本次收货数量
        this.oldReceipFrom.totalReceiptQuantity +=
          +this.receiptDialogFrom.quantity;
        // 当前收货数量
        this.oldReceipFrom.currentReceiptQuantity =
          this.receiptDialogFrom.quantity;
        // 进度条
        this.progressBar();
        // 当前箱号
        this.oldReceipFrom.generate = this.receiptDialogFrom.generate;
        // 待收数量
        this.oldReceipFrom.receivedQuantity =
          this.oldReceipFrom.expectQuantity -
          this.oldReceipFrom.acceptQuantity -
          (this.oldReceipFrom.totalReceiptQuantity
            ? this.oldReceipFrom.totalReceiptQuantity
            : 0);

        // 传后台
        // 当前收货数量
        let data = {
          toQuantity: this.receiptDialogFrom.quantity, // 每次收货数量
          // toBoxCode: this.receiptDialogFrom.generate, // 每次收货箱号
          isOperByPda: true,
          // toCellCode: "TL_KQ1-01-01-01", //this.receiptDialogFrom.cell, // 每次收货仓库号 receiptDialogFrom.cell
          wareId: localStorage.getItem("wareId"),
          wareName: localStorage.getItem("wareName"),
          asnBillNo: this.oldReceipFrom.billNo,
          asnDetailNo: this.oldReceipFrom.detailNo,
        };
        // console.log(JSON.stringify(data));
        //提交数据
        wms
          .post({
            url: "/accept/records/pdaAccept",
            data: data,
          })
          .then((res) => {
            //隐藏遮罩
            this.overlay = false;
            if (res.status == 200 && res.data.code == 200) {
              //提示收货成功
              //弹窗关闭
              this.dialog = false;
            }
            console.log(res);
          });
      },
      // 打开收货框
      taskListReceipt(item) {
        item.receiptList = item.receiptList ? item.receiptList : [];
        this.receiptDialogFrom = Object.assign(
          {},
          { quantity: "", generate: "" }
        );
        this.oldReceipFrom = item;
        this.dialog = true;
        if (
          this.oldReceipFrom.acceptQuantity > this.oldReceipFrom.expectQuantity
        ) {
        }
        // 待收数量
        this.oldReceipFrom.receivedQuantity =
          this.oldReceipFrom.expectQuantity -
          this.oldReceipFrom.acceptQuantity -
          (this.oldReceipFrom.totalReceiptQuantity
            ? this.oldReceipFrom.totalReceiptQuantity
            : 0);
        this.progressBar();
      },

      // 计算进度条
      progressBar() {
        if (!this.oldReceipFrom.totalReceiptQuantity) {
          this.oldReceipFrom.totalReceiptQuantity = 0;
        }
        this.oldReceipFrom.totalQuantity =
          +this.oldReceipFrom.acceptQuantity +
          +this.oldReceipFrom.totalReceiptQuantity;
        console.log(
          112233,
          this.oldReceipFrom.totalQuantity,
          this.oldReceipFrom.totalReceiptQuantity,
          this.oldReceipFrom.acceptQuantity
        );
        this.oldReceipFrom.totalNum = Math.floor(
          (this.oldReceipFrom.totalQuantity / this.oldReceipFrom.expectQuantity) *
          100
        );
        console.log("-------------------", this.oldReceipFrom.totalNum);
      },

      // 生成容器
      buildContainer() {
        let generateType = apiList.codeRule["box"];
        wms
          .get({ url: "/box/infos/generate", data: { boxType: generateType } })
          .then((res) => {
            console.log(res);
            if (res.status == 200 && res.data.code == 200) {
              this.receiptDialogFrom.generate = res.data.data;
            }
          });
      },
      // 生成库位
      createLocation() {
        console.log("生成库位");
        wms
          .get({
            url: "/cell/infos/findByCellUserTypes",
            data: { wareId: 284, cellUseTypes: 0 },
          })
          .then((res) => {
            if (res.status == 200 && res.data.code == 200) {
              this.cellList = res.data.data.list;
              this.sheet = true;
            }
          });
      },
      // 选择库位
      cellSelect(cell) {
        console.log(cell);
        this.receiptDialogFrom.cell = cell.cellCode;
        Storage.setItem("cell", cell.cellCode);
        this.sheet = false;
      },
      // 收货单提交
      receiptListSubmit() {
        let acceptInserts = [];
        console.log(this.receiptList);
        this.receiptList.forEach((item) => {
          acceptInserts = acceptInserts.concat(item.receiptList);
          console.log(acceptInserts);
        });
        // let acceptInserts = this.receiptList;
        console.log(acceptInserts);

        wms
          .post({
            url: "/accept/records/acceptList",
            data: { acceptInserts: acceptInserts },
          })
          .then((res) => {
            if (res.status == 200 && res.data.code == 200) {
              this.receiptList = [];
              this.taskCodeSearch();
            }
            console.log(res);
          });
      },
      // 源单查询
      sourceOrderQuery() {
        if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
          window.api.openWin({
            name: "ArrivalProvisionalReceipt_OrderList",
            url: "./ArrivalProvisionalReceipt_OrderList.html",
          });
        } else {
          this.$root.api.api.openWin({
            name: "ArrivalProvisionalReceipt_OrderList",
            url: "./ArrivalProvisionalReceipt_OrderList.html",
          });
        }
      },
      sumPack(item) {
        let sunValue = 0;
        console.log(
          item.receiptList.forEach((val) => {
            sunValue += +(val.toQuantity ? val.toQuantity : 0);
          })
        );
        return sunValue;
      },
    },
    mounted() {
      //监听页面高度的变化
      window.onresize = () => {
        return (() => {
          this.showHeight = document.body.clientHeight;
        })();
      };

      let pageParam;
      if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        pageParam = window.api.pageParam;
        this.taskFrom.billNo = pageParam.billNo;
        this.taskCodeSearch();
        window.api.addEventListener(
          {
            name: "ArrivalProvisionalReceipt",
          },
          (res) => {
            console.log(res.value.billNo);
            this.taskFrom.billNo = res.value.billNo;
            this.taskCodeSearch();
          }
        );
      } else {
        pageParam = this.$root.api.api.pageParam;
        this.taskFrom.billNo = pageParam.billNo;
        this.taskCodeSearch();
        this.$root.api.api.addEventListener(
          {
            name: "ArrivalProvisionalReceipt",
          },
          (res) => {
            console.log(res.value.billNo);
            this.taskFrom.billNo = res.value.billNo;
            this.taskCodeSearch();
          }
        );
      }
    },
    watch: {
      //判断按钮是否显示
      showHeight: function () {
        console.log("111" + this.showHeight + this.docmHeight);
        if (this.docmHeight > this.showHeight) {
          this.hidshow = false;
        } else {
          this.hidshow = true;
        }
      },
    },
  };
</script>


<style lang="scss" scoped>
  .footer {
    position: absolute;
    padding-top: 20px;
    width: 100%;
    bottom: 0;
  }
  ::v-deep .v-input--selection-controls{
    margin-top: 0;
    padding-top: 0;
  } 
 ::v-deep .col .col-5{
   padding: 6px;
 }
</style>

<style lang="sass" scoped>
  .v-tabs
    height: 100%
    background-color: transparent
    ::v-deep.v-tabs-items
      background-color: transparent

  .receiptList
    .receiptList_detail
      padding: 8px
      min-height: 5rem
      .col
        padding: 2px
        min-height: 1rem
        text-align: right

      .row
        margin: 0
    ::v-deep.receiptList_expansion_panel
      .v-expansion-panel-content__wrap
        padding: 0 0 8px 0
  .task
    padding-bottom: 56px
    &_from
      background-color: #fff
      margin-bottom: 6px
      // .v-sheet.v-card
      //   border-radius: 10px
      //   .v-card__subtitle
      //     padding: 6px
      .v-text-field
        ::v-deep.v-input__prepend-inner
          margin-top: 8px
          display: flex
          font-size: 0.875rem
          min-width: 4rem
          .v-input__append-inner
            .v-btn
              padding: 0 10px
              margin-bottom: 2px

              .col
                padding-bottom: 6px

    &_list
    // background-color: #fff
    .v-card__subtitle
      .row + .row
        margin-top: 6px
        justify-content: flex-end
        padding-right: 10px

        .col
          padding: 6px 8px

  #receiptDialog
    background-color: #F2F3F5 !important

    .headline
      background-color: #193690
      color: #fff
      justify-content: center
      font-size: 18px !important
      line-height: 1.75
      padding: 40px 12px 8px 12px !important

    .v-card__subtitle
      display: flex
      margin: 0
      padding-bottom: 56px
      .row
        margin: 0
        background-color: #fff
        .col
          min-height: 1rem
          padding: 8px
      .receiving_heard
        border-top: 1px solid grey
        font-size: 16px
        font-weight: bold
        .row
          background-color: inherit

    .v-card__text
      padding: 0 10px !important
      .row
        margin: 0
        .col
          padding: 8px
          ::v-deep.v-input__prepend-outer
            min-width: 2rem
            margin-top: 10px
    ::v-deep.navigationBtns
      .navigationBtns_return
        .v-btn__content
          color: #193690

  ::v-deep.v-bottom-navigation
    .v-btn__content
      color: #fff
      font-size: 1rem

  .inputPlaceholder
    ::v-deep.v-text-field__slot
      input::-webkit-input-placeholder
        font-size: 15px
      input::-moz-placeholder
        font-size: 15px
      input:-moz-placeholder
        font-size: 15px
      input:-ms-input-placeholder
        font-size: 15px
  .receipt
    padding-bottom: 56px
    .v-card-list_title
      font-size: 14px !important
</style>
